import React, { useEffect } from 'react'
import { Layout, Tabs } from 'antd';
import LeftNav from "../../components/LeftNav"
// import MainHeader from "../../components/Header"
import {
  Routes,
  Route,
  useNavigate,
  useLocation
} from "react-router-dom"
import { getItem, setItem } from "../../utils/storages"

import Category from "../Category"
import User from "../User"
import Home from "../Home"
import Product from "../Product"
import Role from "../Role"
import Bar from "../Charts/bar.jsx"
import Line from "../Charts/line.jsx"
import Pie from "../Charts/pie.jsx"

const { Sider, Content, Footer } = Layout;
function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null
}
// 主界面
export default function Index() {
  useEffect(() => {
    setItem(
      'tabsList',
      [{
        title: '首页', // 菜单标题名称 
        key: '/main/home', // 对应的path 
      }]
    )
  }, [])
  const location = useLocation();
  useEffect(() => {
    console.log(location, '[[][][][][]')
  }, [location]);
  return (
    <Layout style={{ height: "100%" }}>
      <Sider><LeftNav /></Sider>
      <Layout>
        {/* <MainHeader /> */}
        <Content style={{ background: "#fff", padding: '20px' }}>
          <Routes>
            <Route path='/home' element={<Home />} />
            <Route path='/category' element={<Category />} />
            <Route path='/user' element={<User />} />
            <Route path='/product' element={<Product />} />
            <Route path='/role' element={<Role />} />
            <Route path='/charts/bar' element={<Bar />} />
            <Route path='/charts/line' element={<Line />} />
            <Route path='/charts/pie' element={<Pie />} />
            <Route path='*' element={<Redirect to="/main/home" />} />
          </Routes>
        </Content>
        <Footer style={{ textAlign: "center" }}>欢迎使用后台管理系统，遇到问题请联系系统管理员</Footer>
      </Layout>
    </Layout>
  )
}
